<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
* {
    padding: 0;
    margin: 0;
}

div.container {
    width: 600px;
    height: 400px;
    background-color: pink;
    margin: 100px auto;
    
    position: relative;
}

.container > ul {
    width: 4800px;
    height: 100%;
    
    list-style: none;
    
    position: absolute;
    left: 0;
}

.container > ul > li {
    width: 600px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.container img {
    width: 100%;
    height: 100%;
}
</style>
<body>
<div class="container">
    <ul>
        <li><img src="./img/1.png" alt=""></li>
        <li><img src="./img/2.png" alt=""></li>
        <li><img src="./img/3.png" alt=""></li>
        <li><img src="./img/4.png" alt=""></li>
        <li><img src="./img/5.jpg" alt=""></li>
        <li><img src="./img/6.jpg" alt=""></li>
        <li><img src="./img/7.jpg" alt=""></li>
    </ul>
</div>
<script>
var ul = document.querySelector(".container > ul");
var lis = document.querySelectorAll(".container > ul > li")
for (var i = 0; i < lis.length; i++){
    if (i == 0){
        lis[i].style.opacity = 1;
    }else{
        lis[i].style.opacity = 0;
    }
}

var i = 0;   // 0-5
var time = 50;
setTimeout(function step(){
    lis[i % 7].style.opacity -= 0.05;
    lis[(i + 1) % 7].style.opacity = +lis[(i + 1) % 7].style.opacity + 0.05;
    if (lis[i % 7].style.opacity == 0){
        i++;
        time = 1000;
    }else{
        time = 50
    }

    setTimeout(step, time)
}, 1000)

</script>
</body>
</html>